<script setup>
import {TPisShow,PicCateAllList} from '@/hooks/Picker'
import {  reactive, ref } from 'vue';
import SwyQuill from '@/components/ZXSimg/SwyQuill'
import {getSerTicketpost,getSerTicketedit,putSerTicketedit} from '@/api/SerTicket'
import ZXSimg from '@/components/ZXSimg/index.vue'
import { ElMessage } from 'element-plus'
const  cateList=PicCateAllList()
const JCref=ref()
const elform=ref()
const emit=defineEmits(['updateList'])
const changeInput = (val)=>{
  queryData.description = val
}
const queryData=reactive({
  community_code:'', //所有小区
  title:'', //标题 
  start_time:'', // 开始时间
  end_time:'', // 结束时间
    status:1,  //状态
    multi:1, //是否多选
    anonymous:0,  //是否匿名
    remark:'', //备注
    img_url:'' , //封面图片
    description:'', // 内容
    options:[]
})
const options=ref([])
// 校验
// 校验
const JCrules={
  community_code: [{ required: true, message: "请选择", trigger: "change" }],
  title: [{ required: true, message: "请选择", trigger: "blur" }],
  start_time: [{ required: true, message: "请选择", trigger: "blur" }],
  end_time: [{ required: true, message: "请选择", trigger: "blur" }],
 
}
const formRules={
  options: [{ required: true, message: "选项信息不能为空", trigger: "blur" }],
}

const activeName=ref('first')
const onSearCh=async ()=>{
  // console.log(false||1)
  try {
    Object.assign(queryData,{...queryData,options})
    await JCref.value.validate()  
    await elform.value.validate() 
     if(queryData.options.length==0){
      ElMessage.error('请填写选项信息')
      return
     }
   
     if(queryData.options[0].name==''){
        ElMessage.error('选项信息中第一行选项名称不能为空')
       return 
      }
      if(queryData.options[0].description==''){
        ElMessage.error('选项信息中第一行选项描述不能为空')
       return 
      }
      if(queryData.description==''||queryData.description.match(/<p>(.*?)<\/p>/)[1]=="<br>"||queryData.description.match(/<p>(.*?)<\/p>/)[1]==0){
        console.log(queryData.description.length)
        ElMessage.error('详细信息中内容不能为空')
        return
   }
   
  let res=queryData.id?await putSerTicketedit(queryData): await getSerTicketpost(queryData)
  console.log(res)
  emit('updateList')
  TPisShow.value=false
  } catch (error) {
    
  }
  
}
// 关闭重置
const closeRepair=()=>{
  TPisShow.value=false
  JCref.value.resetFields()
  Object.assign(queryData,{
    community_code:'', //所有小区
  title:'', //标题 
  start_time:'', // 开始时间
  end_time:'', // 结束时间
    status:0,  //状态
    multi:0, //是否多选
    anonymous:0,  //是否匿名
    remark:'', //备注
    img_url:'' , //封面图片
    description:'', // 内容
    options:[]
  })
  Object.assign(options,options.value.length=0)
 
   
  
}
const deleteRow = (index) => {
  options.value.splice(index, 1)
}

const onAddItem = () => {
  options.value.push({
    name:'',description:'',img_url:''
  })
}
// 回显
const VotingEcho=async (id)=>{
 let {data}= await getSerTicketedit(id)
 Object.assign(queryData,data)
 Object.assign(options.value,data.options)
 TPisShow.value=true

}
defineExpose({
  VotingEcho
})
</script>
<template>
  <div>
    <el-drawer v-model="TPisShow" title="新增投票信息" size="50%" style="position: relative;" @close="closeRepair">
      <el-tabs v-model="activeName" class="demo-tabs" >
    <el-tab-pane label="基础信息" name="first">
      <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top" ref="JCref" :rules="JCrules">
        <el-form-item label="所属小区" prop="community_code"> 
        <el-select  placeholder="请输入" v-model="queryData.community_code" clearable style="width: 325px;" >
          <el-option label="所有小区" value="all">所有小区</el-option>
          <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="投票标题" prop="title">
        <el-input style="width: 325px;"  placeholder="请输入" clearable v-model="queryData.title"  ></el-input>
      </el-form-item>
      <el-form-item label="开始时间" prop="start_time">
    <el-date-picker
        v-model="queryData.start_time"
        type="datetime"
        placeholder="请输入"
        style="width: 325px;"
        value-format="x" 
      />
  </el-form-item>
  <el-form-item label="结束时间" prop="end_time">
    <el-date-picker
        v-model="queryData.end_time"
        type="datetime"
        placeholder="请输入"
        style="width: 325px;"
        value-format="x"
      />
      
  </el-form-item>
  <el-form-item label="是否支持多选">
  <el-radio-group v-model="queryData.multi" class="ml-4" style="width: 325px;">
      <el-radio :label="0" size="large">不支持</el-radio>
      <el-radio :label="1" size="large">支持</el-radio>
    </el-radio-group>
</el-form-item>
<el-form-item label="是否匿名">
  <el-radio-group v-model="queryData.anonymous" class="ml-4" style="width: 325px;">
      <el-radio :label="0" size="large">匿名</el-radio>
      <el-radio :label="1" size="large">不匿名</el-radio>
    </el-radio-group>
</el-form-item>
<el-form-item label="状态">
  <el-radio-group v-model="queryData.status" class="ml-4" style="width: 325px;">
      <el-radio :label="0" size="large">关闭</el-radio>
      <el-radio :label="1" size="large">启动</el-radio>
    </el-radio-group>
</el-form-item>
            </el-form>
    </el-tab-pane>
    <!-- 回复信息 -->
    <el-tab-pane label="选项信息" name="second">
      <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top" ref="elform"  :rules="formRules" label-width="700px">
        <el-table :data="options" style="width: 100%" max-height="400">
          <el-table-column  prop="name" label="选项名称" width="110px">
     <template #default="scope">
      <el-input style="width: 96px;" placeholder="请输入" v-model="options[scope.$index].name"></el-input>
     </template>
    </el-table-column>
    <el-table-column prop="description" label="选项描述" width="290px">
      <template #default="scope">
      <el-input type="textarea" style="width: 278px;" placeholder="请输入" v-model="options[scope.$index].description"></el-input>
    </template>
    </el-table-column>
    <el-table-column prop="img_url" label="图片地址" >
      <template #default="scope">
      <ZXSimg v-model="options[scope.$index].img_url" :type="'ticket'" :limit="1"/>
    </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" >
      <template #default="scope">
        <el-button
          link
          type="text"
          size="small"
          @click.prevent="deleteRow(scope.$index)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
      </el-table>
      
      <el-button class="mt-4" style="width: 100%" @click="onAddItem"
      >添加选项</el-button
      >
      <el-form-item prop="options" style="width: 300px;"></el-form-item>
</el-form>

    </el-tab-pane>
    <!-- 详细信息 -->
    <el-tab-pane label="详细信息" name="third">
      <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top"  >
        <el-form-item label="备注">
          <el-input type="textarea" v-model="queryData.remark" placeholder="请输入备注" style="width: 328px;"></el-input>
        </el-form-item>
     
    <el-form-item label="回复图片">
      <ZXSimg v-model="queryData.img_url" :type="'ticket'"/>
    </el-form-item>
    <el-form-item label="内容" prop="description">
      <SwyQuill :value="queryData.description" :min-height="192" @update:input="changeInput"></SwyQuill>
    </el-form-item>
            </el-form>
    </el-tab-pane>
  </el-tabs>

          <span style="position: absolute; bottom: 30px;right:20px;">  <el-button @click="TPisShow=false">取消</el-button>
            <el-button type="primary" @click="onSearCh">确定</el-button></span>
  </el-drawer>
  </div>
</template>
<style lang="scss" scoped>

</style>